<template>
    <section class="main-layout">
        <n-layout>
            <n-layout-header class="header flex-center">欢迎您的莅临！</n-layout-header>
            <n-layout-content content-style="padding: 10px;">
                <section class="welcome-page">
                    <n-grid :x-gap="12" :y-gap="8" :cols="4">
                        <n-grid-item v-for="(item, i) in cardList" :key="i">
                            <n-card content-class="small-card">
                                <template #cover>
                                    <n-image
                                        width="100%"
                                        :height="240"
                                        :src="item.img"
                                        :fallback-src="failImg"
                                        :previewed-img-props="{ style: { border: '8px solid white' } }"
                                        :lazy="true"
                                    />
                                </template>
                                <n-flex justify="space-between">
                                    <p class="remark-title">{{item.imgTitle}}</p>
                                    <n-flex vertical wrap>
                                        <n-button type="info" @click="toPage(item)">进入页面</n-button>
                                        <!-- <n-button strong secondary type="info" @click="toDocument(item)">查看文档</n-button> -->
                                    </n-flex>
                                </n-flex>
                            </n-card>
                        </n-grid-item>
                    </n-grid>
                </section>
            </n-layout-content>
        </n-layout>
    </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
let cardList = reactive(<Array<object>>[])
const failImg = ref('https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg')

const toPage = (item: object) => {
    console.log('跳转页面', item, item.url);
    router.push(item.url);
}
// const toDocument = (item) => {
//     console.log('查看文档', item);
//     router.push({name: item.text});
// }
const initiate = () => {
    cardList = [
        {
            img: '../canvas/page-one.png',
            imgTitle: "某工厂配件系统",
            url: "AccessoriesFactoryView",
            text: ""
        },
        {
            img: '../canvas/loop-pie-click.png',
            imgTitle: "某工厂配件系统: 环比图触发弹窗",
            url: "AccessoriesFactoryView",
            text: ""
        },
        {
            img: '../canvas/page-two.png',
            imgTitle: "互联网资源系统",
            url: "InternetResourcesView",
            text: ""
        },
        {
            img: '../canvas/page-four.png',
            imgTitle: "大数据可视化系统分析",
            url: "BigDataAnalysisView",
            text: ""
        },
        {
            img: '../canvas/page-five.png',
            imgTitle: "中国地图",
            url: "BaseMapView",
            text: ""
        },
        {
            img: '../canvas/page-six.png',
            imgTitle: "数据资源系统",
            url: "DataResourcesView",
            text: ""
        },    
        {
            img: '../canvas/page-seven.png',
            imgTitle: "设备管理系统",
            url: "ManagementSystemView",
            text: ""
        },
        {
            img: '../canvas/page-eight.png',
            imgTitle: "大数据可视化展示",
            url: "DataExhibitionView",
            text: ""
        },
        {
            img: '../canvas/page-nine.png',
            imgTitle: "产品数据管理",
            url: "ProduceListView",
            text: ""
        },
        {
            img: '../canvas/page-ten.png',
            imgTitle: "快递信息管理",
            url: "expressInformationView",
            text: ""
        },
        {
            img: '../canvas/page-three.png',
            imgTitle: "可视化数据-多维分析",
            url: "MultidimensionalAnalysisView",
            text: ""
        },
        {
            img: '../canvas/page-eleven.png',
            imgTitle: "企业端",
            url: "EnterpriseEndView",
            text: ""
        },
        {
            img: '../canvas/page-twelve.png', //twelve
            imgTitle: "企业端",
            url: "RealTimeMonitoringView",
            text: ""
        }
    ]
}
initiate()
</script>

<style scoped>
.main-layout {
    width: 100%;
    position: relative;
}
.welcome-page {
    width: 100%;
    /* height: 100vh; */
}
.header {
    line-height: 1.5;
    height: 6vh;
    text-align: center;
    background-color: #072362;
    border-bottom: 1px solid #0000ff;
    color: #ffffff;
}
.small-card {
    padding: 10px;
}
.remark-title {
    height: 50px;
    line-height: 20px;
    max-width: 60%;
}
.light-green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.12);
}
.green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
}
</style>
  